<template>
	<div class="historyorder">
		<div shadow="never">
			<!--历史订单索引-->
			<div class="historyorder_intro">
				历史订单
				<div class="hr"></div>
			</div>
			<!--历史订单搜索-->
			<div class="historyorder_search">
				<!--放在一行-->
				<el-row>
					<el-input placeholder="请输入订单号或菜品名称" v-model="input4" style="width:250px" class="search_input">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
					<el-button class="search_button" type="success">搜索订单</el-button>
				</el-row>
			</div>


			<div class="historyorder_header">

				<el-tabs v-model="activeName" @tab-click="handleClick" value="first" type="border-card" class="historyorder_header_card">
					<el-tab-pane name="first" label="全部订单">
						<!--加图标-->
						<span slot="label"><i class="iconfont">&#xe61a;</i> 全部订单</span>
						<!--显示的表格-->
						<div class="order-table">
							<el-table :data="tableData" align="center">
								<el-table-column label="订单照片" align="center">
									<template slot-scope="scope">
										<!-- <i class="el-icon-time"></i> -->
										<!-- <span style="margin-left: 10px">{{ `http://localhost:8080/res/${scope.row.food_img}` }}</span> -->
										<el-avatar shape="square" :size="80" :src="`http://localhost:8080/res/${scope.row.order_pic}`" style="margin-left: 10px"></el-avatar>
									</template>
								</el-table-column>
								<el-table-column label="订单创建时间" align="center">
									<template slot-scope="scope">
										<i class="el-icon-time"></i>
										{{ scope.row.order_create_time }}
									</template>
								</el-table-column>
								<el-table-column label="订单金额" align="center">
									<template slot-scope="scope">
										<el-popover trigger="hover" placement="top">
											<p>订单原价: {{ scope.row.order_original_price }}</p>
											<p>订单实际价格: {{ scope.row.order_true_price }}</p>
											<div slot="reference" class="name-wrapper">
												<span style="margin-left: 10px">{{ scope.row.order_true_price }}元</span>
											</div>
										</el-popover>
									</template>
								</el-table-column>
								<el-table-column label="订单状态" align="center">
									<template slot-scope="scope">
										<i class="el-icon-time"></i>
										<span style="margin-left: 10px" v-if="scope.row.status===11"> 待支付</span>
										<span style="margin-left: 10px" v-if="scope.row.status===12"> 已取消</span>
										<span style="margin-left: 10px" v-if="scope.row.status===13"> 已过期</span>
										<span style="margin-left: 10px" v-if="scope.row.status===14"> 已支付</span>
										<span style="margin-left: 10px" v-if="scope.row.status===15"> 处理中</span>
										<span style="margin-left: 10px" v-if="scope.row.status===16"> 配送中</span>
										<span style="margin-left: 10px" v-if="scope.row.status===17"> 未评价</span>
										<span style="margin-left: 10px" v-if="scope.row.status===18"> 已完成</span>
									</template>
								</el-table-column>
								
								<el-table-column fixed="right"
								label="操作"
								width="300px"
								align="center">
									<template slot-scope="scope" >
										
										<el-button @click="lookfordetail(scope.row)" type="primary" icon="el-icon-search" size="mini" round>查看详情</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="order-page">
							<div class="block">
								<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
								 :page-sizes="[2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="已送达" name="second" :value="17">
						<!--加图标-->
						<span slot="label"><i class="iconfont">&#xe66a;</i> 待评价</span>
						<div class="order-table">
						<el-table :data="tableData" align="center">
							<el-table-column label="订单照片" align="center">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" :src="`http://localhost:8080/res/${scope.row.order_pic}`" style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="订单创建时间" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									{{ scope.row.order_create_time }}
								</template>
							</el-table-column>
							<el-table-column label="订单金额" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>订单原价: {{ scope.row.order_original_price }}</p>
										<p>订单实际价格: {{ scope.row.order_true_price }}</p>
										<div slot="reference" class="name-wrapper">
											<span style="margin-left: 10px">{{ scope.row.order_true_price }}元</span>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="订单状态" align="center" :formatter="stateFormat">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px" v-if="scope.row.status===11"> 待支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===12"> 已取消</span>
									<span style="margin-left: 10px" v-if="scope.row.status===13"> 已过期</span>
									<span style="margin-left: 10px" v-if="scope.row.status===14"> 已支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===17"> 未评价</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right"
							label="操作"
							width="300px"
							align="center">
								<template slot-scope="scope" >
									
									<el-button @click="lookfordetail(scope.row)" type="primary" icon="el-icon-search" size="mini" round>查看详情</el-button>
								</template>
							</el-table-column>
						</el-table>
						</div>
						<div class="order-page">
							<div class="block">
								<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
								 :page-sizes="[2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>

					<el-tab-pane label="已支付" name="third" :value="14">
						<span slot="label"><i class="iconfont">&#xe61d;</i> 已支付</span>
						<div class="order-table">
						<el-table :data="tableData" align="center">
							<el-table-column label="订单照片" align="center">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" :src="`http://localhost:8080/res/${scope.row.order_pic}`" style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="订单创建时间" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									{{ scope.row.order_create_time }}
								</template>
							</el-table-column>
							<el-table-column label="订单金额" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>订单原价: {{ scope.row.order_original_price }}</p>
										<p>订单实际价格: {{ scope.row.order_true_price }}</p>
										<div slot="reference" class="name-wrapper">
											<span style="margin-left: 10px">{{ scope.row.order_true_price }}元</span>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="订单状态" align="center" :formatter="stateFormat">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px" v-if="scope.row.status===11"> 待支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===12"> 已取消</span>
									<span style="margin-left: 10px" v-if="scope.row.status===13"> 已过期</span>
									<span style="margin-left: 10px" v-if="scope.row.status===14"> 已支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===17"> 未评价</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right"
							label="操作"
							width="300px"
							align="center">
								<template slot-scope="scope" >
									
									<el-button @click="lookfordetail(scope.row)" type="primary" icon="el-icon-search" size="mini" round>查看详情</el-button>
								</template>
							</el-table-column>
						</el-table>
						</div>
						<div class="order-page">
							<div class="block">
								<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
								 :page-sizes="[2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="配送中" name="sixth" :value="16">
						<span slot="label"><i class="iconfont">&#xe61d;</i> 配送中</span>
						<div class="order-table">
						<el-table :data="tableData" align="center">
							<el-table-column label="订单照片" align="center">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" :src="`http://localhost:8080/res/${scope.row.order_pic}`" style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="订单创建时间" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									{{ scope.row.order_create_time }}
								</template>
							</el-table-column>
							<el-table-column label="订单金额" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>订单原价: {{ scope.row.order_original_price }}</p>
										<p>订单实际价格: {{ scope.row.order_true_price }}</p>
										<div slot="reference" class="name-wrapper">
											<span style="margin-left: 10px">{{ scope.row.order_true_price }}元</span>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="订单状态" align="center" :formatter="stateFormat">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px" v-if="scope.row.status===11"> 待支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===12"> 已取消</span>
									<span style="margin-left: 10px" v-if="scope.row.status===13"> 已过期</span>
									<span style="margin-left: 10px" v-if="scope.row.status===14"> 已支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===16"> 配送中</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right"
							label="操作"
							width="300px"
							align="center">
								<template slot-scope="scope" >
									<el-button @click="takeover(scope.row)" type="primary" icon="el-icon-search" size="mini" round>确认收货</el-button>
									<el-button @click="lookfordetail(scope.row)" type="primary" icon="el-icon-search" size="mini" round>查看详情</el-button>
								</template>
							</el-table-column>
						</el-table>
						</div>
						<div class="order-page">
							<div class="block">
								<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
								 :page-sizes="[2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="已取消" name="fourth" :value="12">
						<span slot="label"><i class="iconfont">&#xe61f;</i> 已取消</span>
						<div class="order-table">
						<el-table :data="tableData" align="center">
							<el-table-column label="订单照片" align="center">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" :src="`http://localhost:8080/res/${scope.row.order_pic}`" style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="订单创建时间" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									{{ scope.row.order_create_time }}
								</template>
							</el-table-column>
							<el-table-column label="订单金额" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>订单原价: {{ scope.row.order_original_price }}</p>
										<p>订单实际价格: {{ scope.row.order_true_price }}</p>
										<div slot="reference" class="name-wrapper">
											<span style="margin-left: 10px">{{ scope.row.order_true_price }}元</span>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="订单状态" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px" v-if="scope.row.status===11"> 待支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===12"> 已取消</span>
									<span style="margin-left: 10px" v-if="scope.row.status===13"> 已过期</span>
									<span style="margin-left: 10px" v-if="scope.row.status===14"> 已支付</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right"
							label="操作"
							width="300px"
							align="center">
								<template slot-scope="scope" >
									
									<el-button @click="lookfordetail(scope.row)" type="primary" icon="el-icon-search" size="mini" round>查看详情</el-button>
								</template>
							</el-table-column>
						</el-table>
						</div>
						<div class="order-page">
							<div class="block">
								<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
								 :page-sizes="[2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
					<!-- 待支付 -->
					<el-tab-pane label="待支付" name="fifth" :value="11">
						<span slot="label"><i class="iconfont">&#xe61f;</i> 待支付</span>
						<div class="order-table">
						<el-table :data="tableData" align="center">
							<el-table-column label="订单照片" align="center">
								<template slot-scope="scope">
									<!-- <i class="el-icon-time"></i> -->
									<!-- <span style="margin-left: 10px">{{ scope.row.pic }}</span> -->
									<el-avatar shape="square" :size="80" :src="`http://localhost:8080/res/${scope.row.order_pic}`" style="margin-left: 10px"></el-avatar>
								</template>
							</el-table-column>
							<el-table-column label="订单创建时间" align="center">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									{{ scope.row.order_create_time }}
								</template>
							</el-table-column>
							<el-table-column label="订单金额" align="center">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>订单原价: {{ scope.row.order_original_price }}</p>
										<p>订单实际价格: {{ scope.row.order_true_price }}</p>
										<div slot="reference" class="name-wrapper">
											<span style="margin-left: 10px">{{ scope.row.order_true_price }}元</span>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="订单状态" align="center" :formatter="stateFormat">
								<template slot-scope="scope">
									<i class="el-icon-time"></i>
									<span style="margin-left: 10px" v-if="scope.row.status===11"> 待支付</span>
									<span style="margin-left: 10px" v-if="scope.row.status===12"> 已取消</span>
									<span style="margin-left: 10px" v-if="scope.row.status===13"> 已过期</span>
									<span style="margin-left: 10px" v-if="scope.row.status===14"> 已支付</span>
								</template>
							</el-table-column>
							<el-table-column fixed="right"
							label="操作"
							width="300px"
							align="center">
								<template slot-scope="scope" >
									<el-button @click="lookfordetail(scope.row)" type="primary" icon="el-icon-search" size="mini" round>查看详情</el-button>
									<el-button @click="paid(scope.row)" type="primary" icon="el-icon-search" size="mini" round>前往支付</el-button>
								</template>
							</el-table-column>
							<!-- <el-table-column label="操作" align="center">
								<template slot-scope="scope">
									<el-button type="primary" icon="el-icon-search" size="mini" round @click="lookfordetail(scope.row)">查看详情</el-button>
									<el-button type="primary" icon="el-icon-search" size="mini" round @click="cancel(scope.row)">取消订单</el-button>
									<el-button type="primary" icon="el-icon-search" size="mini" round @click="paid(scope.row)">前往支付</el-button>
								</template>
							</el-table-column> -->
						</el-table>
						</div>
						<div class="order-page">
							<div class="block">
								<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
								 :page-sizes="[2, 3, 4, 5]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
								</el-pagination>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script>
	import HistoryOrderService from './HistoryOrderService.js';
	import Vue from 'vue';
	export default {
		data() {
			return {
				pic: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
				importData: [],
				input4: '',
				//查找相关的searchform数据
				searchform: {
					order_owner_name: null,
					order_id: null,
					status: null,
				},
				
				tableData: [],
				//？？？？
				activeName: 'first',
				//控制弹出框显示的属性
				formLabelWidth: '120px',
				//分页相关
				pageNum: 1,
				pageSize: 4,
				total: 50,
			}
		},
		created() {
			//console.log(new Date());
			this.getPage(this.pageNum,this.pageSize);
		},
		methods: {
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			handleClick(tab, event) {
				console.log(tab.$attrs.value);
				this.searchform.status = tab.$attrs.value;
				this.pageNum = 1;
				this.getPage(this.pageNum, this.pageSize);
			},
			//没想好怎么写  传递订单id或者对象
			lookfordetail(row) {
				console.log(row)
				this.$router.push({
					name: 'OrderDetailForLook',
					params: {
						data: row.order_id
					}
				}, );
			},
			takeover(row){
				if(row.status==16){
					Vue.axios.post(`http://localhost:8080/goodorder/updategoodorder`,{
						order_id:row.order_id,
						status:17
						
					}).then(r=>{
						this.getPage(this.pageNum, this.pageSize)
					})
					// this.tableData.shift();
					
					alert("谢谢惠顾，期待您下次光临");
					
				}else if(row.status==17 || row.status==18){
					alert("您已收过货");
				}else {
					alert("请耐心等待");
				}
				
			},
			cancel(row) {
				console.log(row);
				this.axios.get(`http://localhost:8080/goodorder/updategoodorderstatus/` + row.order_id).then(res => {
					console.log(res.data);
					//更新
					this.getPage(this.pageNum, this.pageSize)
				})
			},
			paid(row){
				this.$router.push({
					name: 'Payment',
					params: {
						order_id: row.order_id,
					}
				});
			},
			stateFormat(row, column) {
				if (row.state == 11) {
					return '已送达'
				}
				if (row.state == 12) {
					return '已支付'
				}
				if (row.state == 13) {
					return '已取消'
				}
				if (row.state == 14) {
					return '待支付'
				}
				if (row.state == 17) {
					return '待评价'
				}
			},
			
			handleSizeChange(val) {
				this.pageSize = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			handleCurrentChange(val) {
				this.pageNum = val;
				this.getPage(this.pageNum, this.pageSize);
			},
			getPage(pageNum, pageSize) {
				this.axios
				HistoryOrderService.getOrderByUserId(this.searchform, {
					pageNum: pageNum,
					pageSize: pageSize
				}, res => {
					console.log(res);
					this.tableData = res.searchResult.list;
					this.total = res.searchResult.total;
				})
			},
			
		}
	}
</script>

<style lang="less">
	.historyorder {
		width: 100%;
		margin: 20px;

		.historyorder_intro {
			font-family: "Helvetica Neue";
			font-size: 26px;
			line-height: 28px;
			color: #606266; //字体颜色
			letter-spacing: 1px;
		}

		.historyorder_search {
			margin-top: 30px;
			margin-bottom: 30px;
			margin-left: 25%;

			.search_input {
				margin-right: 20px;
			}
		}

		.historyorder_header {

			.historyorder_header_card {
				box-shadow: 0 1px 1px 0 rgba(96, 98, 102, 0.1);
				border-radius: 10px //设置圆角
					//background-color: lightblue;

			}
		}
		

		.hr {
			border-bottom: 1px solid #f5a8a8;
			height: 0px;
			margin-top: 10px;
		}
		
		.order-page {
			height: 32px;
			margin: 20px 20px 0 0;
			float: right;
		}
	}
</style>
